<div class="d-flex align-items-center mt-2">
    <div class="w-75 truncate">
        <a *ngIf="isGenerating" href="javascript:;;" class="text-light-grey" title={{task.title}}>
            <i class="ti-file mr-2"></i> {{ task.title }}
        </a>

        <a *ngIf="isFinished" href="javascript:;;" (click)="downloadTask()" class="text-white" title={{task.title}}>
            <i [ngClass]="{'ti-download': isDownload(), 'ti-upload': !isDownload()}" class="mr-2"></i> {{ task.title }}
        </a>

        <span *ngIf="isFailed" title={{task.title}}>
            <i class="ti-file mr-2" ></i> {{ task.title }}</span>
    </div>
    <div class="ml-auto pointer">
        <a *ngIf="!isDownload() || hasStatus('running') || hasStatus('scheduled')" (click)="cancelTask()" class="text-light-grey">
            <i class="ti-close"></i>
        </a>
        <a *ngIf="isDownload() && (isFinished || isComplete || isFailed)" (click)="closeTask()" class="text-light-grey">
            <i class="ti-close"></i>
        </a>
    </div>
</div>
<div class="progress mt-1">
    <div class="progress-bar" [ngClass]="{
            'progress-bar-striped progress-bar-animated bg-secondary': hasStatus('running'),
            'bg-primary': isComplete,
            'bg-red': isFailed
        }" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
<div class="text-uppercase bold mt-2 mb-4 small">
    <span *ngIf="isGenerating" class="text-secondary">In Progress</span>
    <span *ngIf="isFinished" class="text-primary">Completed</span>
    <span *ngIf="isFailed" class="text-white">Failed</span>
</div>